<template>
    <div class="Article" id="Article">
        <div class="Article_infon">
            <el-input v-model="title" placeholder="标题" style="width: 30%;"></el-input>
            <el-select v-model="sort" placeholder="请选择分类">
                <el-option v-for="(item,index) in sorts" :key="index" :value="item">
                    <span style="float: left">{{ item }}</span>
                 </el-option>
            </el-select>
        <button class="fabu"  @click="save" v-if="forx">发表文章</button>
        <button class="xiugai"  @click="change" v-if="!forx">修改文章</button>
        </div>
     <mavon-editor :ishljs = "true" v-model="value" ref=md @imgAdd="imgAdd" class="md_editor"/>
    </div>
</template>

<script>
import {postMd,uploadFile,ChangeMd} from '../api/Article.js'//先要全局引入
import { nanoid } from "nanoid";  
import axios from 'axios'
export default {
    data() {
      return{
          value : this.$route.query.value,         //md文件
          sorts: [],          //所有分类    
          sort: this.$route.query.SortName,           //选择的分类
          title:this.$route.query.BlogTitle,           //博客的名字
          forx:JSON.parse(this.$route.query.fabuorxiugai),  //发布还是修改，发布为true，修改为false
          userToken: localStorage.getItem("user_Token"),
          PAge:this.page,
          PAgeSize:this.pageSize,
          Bloginfo:this.blogInfo,
         }
     },
    mounted:function(){
         this.getSort();
    },
  methods : {
    //获取所有的分类
    getSort(){
      axios.get('/AllSort').then(response=>{
        this.sorts=response.data;
      })
    },
    save(){
      if(this.title==null){
        this.$message.error('错了哦，标题不可以为空！');
      }else{
        if(this.value.length>500){
         //传递nanoid()生成随机数字作为文件名(文件名),typeId(文件所属类别),value(md文件内容）
         var result=postMd(this.userToken,this.title,this.sort,nanoid(),"java",this.value);
         this.dialogFormVisible=false
         this.$message({
            type: 'success',
            message: '发布成功!'
          });
            this.$router.push("/")
      }else{
        this.$message.error('错了哦，请输入文本大于500个字符！');
      }
      }
      },
      //保存图片到后台
    imgAdd(pos, $file){
      var _this = this;
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append('image', $file);
      uploadFile(formdata).then(resp=> {
      var url = resp.data; //取出上传成功后的url
      if (resp.status == 200) {
      //  将后端返回的url放在md中图片的指定位置
        _this.$refs.md.$img2Url(pos, url)
      } else {
         _this.$message({type: resp.status, message: resp.statusText});
       }
      });
    },
    change(){
      if(this.title==""){
        this.$message.error('错了哦，标题不可以改为空噢！');
      }else{
        if(this.value.length>500){
         //传递nanoid()生成随机数字作为文件名(文件名),typeId(文件所属类别),value(md文件内容）
         var result=ChangeMd(this.title,this.sort,"java",this.$route.query.blogId,this.value);
         this.dialogFormVisible=false
         this.$message({
            type: 'success',
            message: '修改成功!'
          });
            this.$router.push("/")
      }else{
        this.$message.error('错了哦，请输入文本大于500个字符！');
      }
      }
    },
   },

}
</script>

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    body{
        background-color: aliceblue;
    }
    .Article_infon{
        width: 100%;
        height: 7%;
        position: absolute;
        top: 0;
        background-color: rgb(255, 255, 255);
        /*flex 布局*/
		display: flex;
		/*实现垂直居中*/
		align-items: center;
    }
    .md_editor{
        position: absolute;
        top:70px;
    }
    .v-note-wrapper .v-note-panel .v-note-edit.divarea-wrapper {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    width: 100%;
    height: 880px;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    box-sizing: border-box;
    cursor: text;
    border-bottom-left-radius: 4px;
}
    .fabu{
        width: 90px;
        height: 46px;
        background-color: rgb(34, 145, 218);
        color: #fff;
        position: absolute;
        right: 3%;
        border-radius: 8px;
        border: 0px;
    }
    .xiugai{
        width: 90px;
        height: 46px;
        background-color: rgb(34, 145, 218);
        color: #fff;
        position: absolute;
        right: 3%;
        border-radius: 8px;
        border: 0px;
    }

</style>